<template>
    <!-- 
    <b-modal ref="my-modal" hide-footer title="Using Component Methods">
     <div class="d-block text-center">
       <h3>Hello From My Modal!</h3>
     </div>
     <b-button class="mt-3" variant="outline-danger" block @click="hideModal">Close Me</b-button>
     <b-button class="mt-2" variant="outline-warning" block @click="toggleModal">Toggle Me</b-button>
   </b-modal> 
    -->
    <!--
        body-class="modalStyle" 表示样式
        size="lg" 表示模态窗口大小 xl,lg,sm,full
        hide-footer 表示隐藏底部按钮
        hide-header 表示隐藏头部内容
        no-close-on-backdrop 表示鼠标点击背景不可关闭
        hide-header-close 表示隐藏头部关闭按钮
        centered 居中
        ok-title=“确定” 
        cancel-title=取消
        @ok="handleOk" 
        @cancel="handleCancel"
        scrollable 滚动条
        hide-backdrop 隐藏背景
        wrapClassName="ant-modal-cust-warp" 
        style="top:5%;height: 85%;overflow-y: hidden" 样式
    -->
    <b-modal ref="my-modal" title="提交（注意：仅限测试示例）" scrollable no-close-on-backdrop>
        <div class="d-block text-center">
            <!--begin::div-->
            <div class="m-form m-form--fit m-form--label-align-left m-form--group-seperator-dashed">
                <div class="m-portlet__body">                    
                    <el-table :data="nodeList" stripe border style="width: 100%">
                        <el-table-column prop="name" show-overflow-tooltip label="节点名称">
                            
                        </el-table-column>
                        <el-table-column prop="nodeType" show-overflow-tooltip label="节点类型">
                        </el-table-column>
                        <el-table-column prop="multi" show-overflow-tooltip label="会签节点">
                            <template slot-scope="scope">
                                <div v-if="scope.row.multi == 10">
                                    <b-badge class="mr-1" variant="primary">否</b-badge>
                                </div>
                                <div v-else-if="scope.row.multi == 20">
                                    <b-badge class="mr-1" variant="warning">是</b-badge>
                                </div>
                                <div v-else>
                                    <b-badge class="mr-1" variant="secondary">未知</b-badge>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="multiText" show-overflow-tooltip label="审批人">
                            <template slot-scope="scope">
                                {{ scope.row.multiText }}
                            </template>
                        </el-table-column>
                        
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <a href="javascript:;" @click="selectUser(scope.$index, scope.row)"
                                    class="btn btn-sm btn-clean btn-icon" title="选择审批人">
                                    <span class="svg-icon svg-icon-primary svg-icon-2x">
                                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                                <rect x="0" y="0" width="24" height="24"/>
                                                <path d="M14.2928932,16.7071068 C13.9023689,16.3165825 13.9023689,15.6834175 14.2928932,15.2928932 C14.6834175,
                                                14.9023689 15.3165825,14.9023689 15.7071068,15.2928932 L19.7071068,19.2928932 C20.0976311,19.6834175 20.0976311,
                                                20.3165825 19.7071068,20.7071068 C19.3165825,21.0976311 18.6834175,21.0976311 18.2928932,20.7071068 L14.2928932,16.7071068 Z" fill="#000000" fill-rule="nonzero" opacity="0.3"/>
                                                <path d="M11,16 C13.7614237,16 16,13.7614237 16,11 C16,8.23857625 13.7614237,6 11,6 C8.23857625,6 6,8.23857625 6,11 C6,
                                                13.7614237 8.23857625,
                                                16 11,16 Z M11,18 C7.13400675,18 4,14.8659932 4,11 C4,7.13400675 7.13400675,4 11,4 C14.8659932,4 18,7.13400675 18,11 C18,
                                                14.8659932 14.8659932,18 11,18 Z" fill="#000000" fill-rule="nonzero"/>
                                                <path d="M10.5,10.5 L10.5,9.5 C10.5,9.22385763 10.7238576,9 11,9 C11.2761424,
                                                9 11.5,9.22385763 11.5,9.5 L11.5,10.5 L12.5,10.5 C12.7761424,10.5 13,10.7238576 13,11 C13,11.2761424 12.7761424,
                                                11.5 12.5,11.5 L11.5,11.5 L11.5,12.5 C11.5,12.7761424 11.2761424,13 11,13 C10.7238576,13 10.5,12.7761424 10.5,12.5 L10.5,
                                                11.5 L9.5,11.5 C9.22385763,11.5 9,11.2761424 9,11 C9,10.7238576 9.22385763,10.5 9.5,10.5 L10.5,10.5 Z" fill="#000000" opacity="0.3"/>
                                            </g>
                                        </svg>
                                    </span>
                                </a>

                                <a href="javascript:;" @click="removeUser(scope.$index, scope.row)"
                                    class="btn btn-sm btn-clean btn-icon" title="移除审批人">
                                    <span class="svg-icon svg-icon-primary svg-icon-2x">
                                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                                            width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                                <rect x="0" y="0" width="24" height="24"></rect>
                                                <path
                                                    d="M6,8 L6,20.5 C6,21.3284271 6.67157288,22 7.5,22 L16.5,22 C17.3284271,22 18,21.3284271 18,20.5 L18,8 L6,8 Z"
                                                    fill="#000000" fill-rule="nonzero"></path>
                                                <path
                                                    d="M14,4.5 L14,4 C14,3.44771525 13.5522847,3 13,3 L11,3 C10.4477153,3 10,3.44771525 10,
                                                                            4 L10,4.5 L5.5,4.5 C5.22385763,4.5 5,4.72385763 5,5 L5,5.5 C5,5.77614237 5.22385763,6 5.5,6 L18.5,
                                                                            6 C18.7761424,6 19,5.77614237 19,5.5 L19,5 C19,4.72385763 18.7761424,4.5 18.5,4.5 L14,4.5 Z"
                                                    fill="#000000" opacity="0.3">
                                                </path>
                                            </g>
                                        </svg>
                                    </span>
                                </a>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </div>
        <template slot="modal-footer">
            <!--自定义按钮-->
            <button type="button" class="btn btn-light-danger font-weight-bold mr-2" block @click="hideModal">
                <i class="icon-xl fa fa-times"></i>取 消
            </button>
            <button type="button" class="btn btn-light-success font-weight-bold mr-2" @click="completeTask">
                <i class="icon-xl fas fa-save"></i> 提 交
            </button>
        </template>
        <ZBUserSelect ref="ZBUserSelectRef" :userOption="{ userOption }" @change="doSetAssignee"></ZBUserSelect>
    </b-modal>
</template>
<script>
import apiUtil from "@/core/util/apiUtil.js";
import ZBUserSelect from "@/components/user-select.vue";
import { handleNotify, handleAlert, handleConfirm, showWating, closeWating } from "@/core/util/jehcUtil.js";
export default {
    data() {
        return {
            nodeList: [],
            userOption: { allowMultiSelect: false },
            currentTaskRow:null,
            lcTaskForm: {
                processInstanceId: "",
                taskId: "",
                activityId: "",
                endAllActivityInstances: "",
                comment: "",
                lcReceiveParams: [{ activityId: "" }],
            }
        }
    },
    components: {
        ZBUserSelect,
    },
    watch: {
    },
    mounted() {

    },
    methods: {
        completeTask() {
            if(this.nodeList == null || this.nodeList.length == 0){
                handleAlert("节点不存在，无法提交", "warning", 3)
                return;
            }
            let lcReceiveParams = [];
             this.nodeList.forEach(item => {    
                let lcReceiveItem = {};
                lcReceiveItem.multiValue = item.multiValue;
                lcReceiveItem.multiText = item.multiText;
                lcReceiveItem.activityId = item.taskId;//注意item中的taskId其实是流程定义中节点编号
                lcReceiveParams.push(lcReceiveItem);                              
            });
            this.lcTaskForm.lcReceiveParams = lcReceiveParams;
            // 保存前提示
            this.$confirm("确定提交?", "提示", { type: "warning", }).then(() => {
                apiUtil.post(process.env.VUE_APP_BPM_API + "/lcTask/completeTask", this.lcTaskForm).then(({ data }) => {
                    if (data.success) {
                        handleAlert("操作成功", "success", 3);
                        this.hideModal();//关闭窗体
                        this.$emit("change", data);//组件传值，即向父级模态框中传递值，采用change方式，目标刷新主列表使用
                    } else {
                        handleAlert("操作失败", "error", 3);
                    }
                });
            }).catch(() => { });//注意这里，这里是重点！！！;   
        },
        showModal(row) {
            this.nodeList = [];
            this.$refs['my-modal'].show();
            this.initNodeList(row.taskId)
            this.lcTaskForm.taskId = row.taskId;
            this.lcTaskForm.processInstanceId = row.processInstanceId;
        },
        hideModal() {
            this.$refs['my-modal'].hide()
        },
        toggleModal() {
            // 当模态已隐藏时，我们传递要返回焦点的按钮的ID
            this.$refs['my-modal'].toggle('#toggle-btn')
        },
        initNodeList(id) {
            let params = {};
            apiUtil.get(process.env.VUE_APP_BPM_API + "/lcTask/nextNode/" + id, params).then(({ data }) => {
                this.nodeList =  data.data.map(v=>{//采用读出来的数据重新增加属性 （注意这样写 否则动态改变el-table cell中值无效）
                    v.multiValue = "";
                    v.multiText = "";
                    return v
                })              
            });
        },
        selectUser(index,row){
            this.userOption.allowMultiSelect = false;
            this.$refs.ZBUserSelectRef.showModal(row);
            this.currentTaskRow = row;
        },
        removeUser(index,row){
            let taskId = row.taskId;
            this.$set(this.nodeList[index],"multiValue","")
            this.$set(this.nodeList[index],"multiText","")
            // this.nodeList.forEach(item => {               
            //     if(taskId === item.taskId){
            //         item.multiValue = "";
            //         item.multiText = "";
            //     }         
            // }) 
        },
        doSetAssignee(data) {//执行转办
            let ids = data.map((item) => item.id);
            let names = data.map((item) => item.name);
            let taskId = this.currentTaskRow.taskId;
            this.$bvModal.msgBoxConfirm("确定选择任务【" + this.currentTaskRow.name + "】的经办人为：【" + names.join(",") + "】？", {
                title: '提示',
                size: 'sm',
                buttonSize: 'sm',
                okVariant: 'success',
                okTitle: '确定',
                cancelTitle: '取消',
                headerClass: 'p-2 border-bottom-0',
                footerClass: 'p-2 border-top-0',
                hideHeaderClose: false,
                centered: true
            }).then(value => {
                if (value) {
                    let multiValue = ids.join(",");
                    let multiText = names.join(",");  
                    let rowIndex = null;  
                    this.nodeList = this.nodeList.map(v=>{
                        if(taskId === v.taskId){
                            v.multiValue = multiValue;
                            v.multiText = multiText;
                        }
                        return v
                    })
                }
            }).catch(err => {
            })
        },
    }
}
</script>